<template> 
	<div class="JNPF-common-layout">
		<div class="JNPF-common-layout-center">
			<el-row class="JNPF-common-search-box" :gutter="16">
				<el-form @submit.native.prevent>
					<el-col :span="6">
						<el-form-item label="设备类型">
							<!-- <el-input v-model="query.sblx" placeholder="设备类型" clearable  /> -->
                            <el-select v-model="query.sblx" placeholder="设备类型" clearable >
								<el-option v-for="(item, index) in sblxOptions" :key="index" :label="item.fullName" :value="item.id" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="设备名称">
							<el-input v-model="query.sbmc" placeholder="设备名称" clearable  />
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="处理状态">
							<el-select v-model="query.clzt" placeholder="处理状态" clearable >
								<el-option v-for="(item, index) in clztOptions" :key="index" :label="item.fullName" :value="item.id" />
							</el-select>
						</el-form-item>
					</el-col>
                    <template v-if="showAll">
                        <el-col :span="6">
                            <el-form-item label="报警时间">
                                <el-date-picker v-model="query.bjsj" placeholder="报警时间" format="yyyy-MM-dd HH:mm:ss" type="datetime" clearable  />
                            </el-form-item>
                        </el-col>
                    </template>
					<el-col :span="6">
					<el-form-item>
						<el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
						<el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
						<el-button type="text" icon="el-icon-arrow-down" @click="showAll=true" v-if="!showAll">展开</el-button>
						<el-button type="text" icon="el-icon-arrow-up" @click="showAll=false" v-else>收起</el-button>
					</el-form-item>
					</el-col>
				</el-form>
			</el-row>
			<div class="JNPF-common-layout-main JNPF-flex-main">
				<div class="JNPF-common-head">
					<div>
						<!-- <el-button type="primary" icon="el-icon-plus" @click="addOrUpdateHandle()">
							新增
						</el-button> -->
                        <el-button type="primary" style="background-color:#FF5722;border-color:#FF5722;" @click="allQrhl(3)">
							全部确认
						</el-button>
                        <el-button type="primary" style="background-color:orange;border-color:orange;" @click="allQrhl(2)">
							全部忽略
						</el-button>
                        <el-button type="text" icon="el-icon-download" @click="exportData()">
							导出
						</el-button>
					</div>
					<div class="JNPF-common-head-right">
						<el-tooltip effect="dark" content="刷新" placement="top">
							<el-link icon="icon-ym icon-ym-Refresh JNPF-common-head-icon" :underline="false"  @click="reset()" />
						</el-tooltip>
						<screenfull :isContainer="true" />
						<el-tooltip effect="dark" content="列设置" placement="top">
							<el-link icon="icon-ym icon-ym-options JNPF-common-head-icon" :underline="false" />
						</el-tooltip>
					</div>
				</div>
				<JNPF-table v-loading="listLoading" :data="list">
					<el-table-column prop="sbbh" label="设备编号" align="left" />
					<!-- <el-table-column prop="sblx" label="设备类型" align="left" /> -->
                    <el-table-column prop="sblx" label="设备类型" align="left">
                        <template slot-scope="scope">{{ scope.row.sblx | dynamicText(sblxOptions) }}</template>
                    </el-table-column>
					<el-table-column prop="sbmc" label="设备名称" align="left" />
					<el-table-column label="处理状态"  prop="clzt" algin="left">
						<template slot-scope="scope">
                            <!-- {{ scope.row.clzt | dynamicText(clztOptions) }} -->
                            <span v-if="scope.row.clzt==0" style="color:red !important;">未处理</span>
                            <span v-if="scope.row.clzt==1" style="color:green !important;">已处理</span>
                            <span v-if="scope.row.clzt==2" style="color:orange !important;">忽略</span>
                            <span v-if="scope.row.clzt==3" style="color:blue !important;">确认</span>
                        </template>
					</el-table-column>
					<el-table-column prop="aqjb" label="安全级别" align="left" >
                        <template slot-scope="scope">{{ scope.row.aqjb | dynamicText(aqjbOptions) }}</template>
                    </el-table-column>
					<el-table-column prop="czry" label="处置人员" align="left" />
					<el-table-column prop="czsj" label="处置时间" align="left" />
					<el-table-column prop="bjsj" label="报警时间" align="left" />
					<el-table-column prop="czjg" label="处置结果" align="left" />
					<el-table-column label="操作" fixed="right" width="200">
						<template slot-scope="scope">
							<!-- <el-button type="text" @click="addOrUpdateHandle(scope.row.id)" >
								编辑
							</el-button> -->

                            <!-- <el-button type="text" v-if="scope.row.clzt==0" style="color:1890ff !important;" @click="addChuLi(scope.row.id)">处理</el-button>
                            <el-button type="text" v-else style="color:#C0C4CC !important;" disabled>处理</el-button>
                            <el-button type="text" v-if="scope.row.clzt==0" style="color:1890ff !important;" @click="addHuLue(scope.row.id)">忽略</el-button>
                            <el-button type="text" v-else style="color:#C0C4CC !important;" disabled>忽略</el-button>
                            <el-button type="text" v-if="scope.row.clzt==0" style="color:1890ff;" @click="addQueRen(scope.row.id)">确认</el-button>
                            <el-button type="text" v-else style="color:#C0C4CC !important;" disabled>确认</el-button> -->

                            <el-button type="text" v-if="scope.row.clzt==0" style="background-color:green;border-color:green;color:#fff;padding:5px 5px;margin-left: 5px;" @click="addChuLi(scope.row.id)">处理</el-button>
                            <el-button type="text" v-else style="background-color:#ccc;border-color:#ccc;color:#fff;padding:5px 5px;margin-left: 5px;" disabled>处理</el-button>
                            <el-button type="text" v-if="scope.row.clzt==0" style="background-color:orange;border-color:orange;color:#fff;padding:5px 5px;margin-left: 5px;" @click="addHuLue(scope.row.id)">忽略</el-button>
                            <el-button type="text" v-else style="background-color:#ccc;border-color:#ccc;color:#fff;padding:5px 5px;margin-left: 5px;" disabled>忽略</el-button>
                            <el-button type="text" v-if="scope.row.clzt==0" style="background-color:#FF5722;border-color:#FF5722;color:#fff;padding:5px 5px;margin-left: 5px;" @click="addQueRen(scope.row.id)">确认</el-button>
                            <el-button type="text" v-else style="background-color:#ccc;border-color:#ccc;color:#fff;padding:5px 5px;margin-left: 5px;" disabled>确认</el-button>

							<!-- <el-button type="text" @click="handleDel(scope.row.id)" class="JNPF-table-delBtn">
								删除
							</el-button> -->
							<el-button type="primary" style="padding:5px 5px;margin-left: 5px;" @click="addOrUpdateHandle(scope.row.id,true)" >
								详情
							</el-button>
						</template>
					</el-table-column>
				</JNPF-table>
				<pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="initData" />
			</div>
		</div>
		<JNPF-Form v-if="formVisible" ref="JNPFForm" @refresh="refresh" />
        <ChuLi-Form v-if="formChuLi" ref="ChuLiForm" @refresh="refresh" />
		<ExportBox v-if="exportBoxVisible" ref="ExportBox" @download="download" />
	</div>

</template> 
<script>
    import request from '@/utils/request'
    import {getDictionaryDataSelector} from '@/api/systemData/dictionary'
    import JNPFForm from './Form'
    import ChuLiForm from './chuLi'
    import ExportBox from './ExportBox'
    import {previewDataInterface} from '@/api/systemData/dataInterface'

    export default {
        components: {JNPFForm,ChuLiForm,ExportBox},
        data() {
            return {
                isActive1:true,
                isActive2:true,
                isActive3:true,
                formChuLi: false,  //-
                showAll: false,
                query: {
					sblx:undefined,
					sbmc:undefined,
					clzt:undefined,
					bjsj:undefined,

                },
                defaultProps: {
                    children: 'children',
                    label: 'fullName'
                },
                list: [],
                listLoading: true,
                total: 0,
                listQuery: {
					currentPage: 1,
					pageSize: 20,

                    sort: "desc",
                    sidx: "",
                },
                formVisible: false,
                exportBoxVisible: false,
                columnList: [
					{prop: 'sbbh', label: '设备编号'},
					{prop: 'sblx', label: '设备类型'},
					{prop: 'sbmc', label: '设备名称'},
					{prop: 'clzt', label: '处理状态'},
					{prop: 'aqjb', label: '安全级别'},
					{prop: 'czry', label: '处置人员'},
					{prop: 'czsj', label: '处置时间'},
					{prop: 'bjsj', label: '报警时间'},
					{prop: 'czjg', label: '处置结果'},

                ],
				clztOptions:[{"fullName":"未处理","id":"0"},{"fullName":"已处理","id":"1"},{"fullName":"忽略","id":"2"},{"fullName":"确认","id":"3"}],
                sblxOptions:[{"fullName":"温度","id":"0"},{"fullName":"压力","id":"1"},{"fullName":"液位","id":"2"},{"fullName":"流量","id":"3"},{"fullName":"ESD按钮","id":"4"},{"fullName":"气体","id":"5"},{"fullName":"其他","id":"6"}],
                aqjbOptions:[{"fullName":"一级","id":"0"},{"fullName":"二级","id":"1"},{"fullName":"三级","id":"2"}],
            }
        },
        computed: {},
        created() {
			this.initData();

        },
        methods: {


            initData() {
                this.listLoading = true;
                let query = {
                    ...this.listQuery,
                    ...this.query
                };
                request({
                    url: `/api/System/AlarmEvent`,
                    method: 'get',
                    data: query
                }).then(res => {
                    this.list = res.data.list
                    this.total = res.data.pagination.total
                    this.listLoading = false
                    this.$nextTick(() => {
                        this.tableHeight = "100%"
                    });
                })
            },
            handleDel(id) {
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    type: 'warning'
                }).then(() => {
                    request({
                        url: `/api/System/AlarmEvent/${id}`,
                        method: 'DELETE'
                    }).then(res => {
                        this.$message({
                            type: 'success',
                            message: res.msg,
                            onClose: () => {
                                this.initData()
                            }
                        });
                    })
                }).catch(() => {
                });
            },
            addOrUpdateHandle(id,isDetail) {
                this.formVisible = true
                this.$nextTick(() => {
                    this.$refs.JNPFForm.init(id,isDetail)
                })
            },
            exportData() {
                this.exportBoxVisible = true
                this.$nextTick(() => {
                    this.$refs.ExportBox.init(this.columnList)
                })
            },
            download(data) {
                let query = {...data, ...this.listQuery, ...this.query}
                request({
                    url: `/api/System/AlarmEvent/Actions/Export`,
                    method: 'POST',
                    data: query
                }).then(res => {
                    if (!res.data.url) return
                    window.location.href = this.define.comUrl + res.data.url
                    this.$refs.ExportBox.visible = false
                    this.exportBoxVisible = false
                })
            },
            search() {
                this.listQuery = {
					currentPage: 1,
					pageSize: 20,

                    sort: "desc",
                    sidx: "",
                }
                this.initData()
            },
            refresh(isrRefresh) {
                this.formVisible = false
                if (isrRefresh) this.reset()
            },
            reset() {
                for (let key in this.query) {
                    this.query[key] = undefined
                }
                this.listQuery = {
					currentPage: 1,
					pageSize: 20,

                    sort: "desc",
                    sidx: "",
                }
                this.initData()
            },
            //-
            addChuLi(id,isDetail){
                this.formChuLi = true
                this.$nextTick(() => {
                    this.$refs.ChuLiForm.init(id,isDetail)
                })
            },
            addHuLue(id){
                let query = {
                   'id': id,
                   'clzt': 2
                };
               request({
                url: '/api/System/AlarmEvent/' + id,
                method: 'PUT',
                data: query
              }).then((res) =>{
                this.$message({
                  message: res.msg,
                  type: 'success',
                  duration: 1000,
                  onClose: () =>{
                    this.visible = false;
                    this.initData();
                  }
                })
              })
            },
            addQueRen(id){
                let query = {
                   'id': id,
                   'clzt': 3
                };
              request({
                url: '/api/System/AlarmEvent/' + id,
                method: 'PUT',
                data: query
              }).then((res) =>{
                this.$message({
                  message: res.msg,
                  type: 'success',
                  duration: 1000,
                  onClose: () =>{
                    this.visible = false;
                    this.initData();
                  }
                })
              })
            },

            allQrhl(state){
                this.listLoading = true;
                let query = {
                    clzt: state
                };
                request({
                    url: `/Actions/Updateall`,
                    method: 'post',
                    data: query
                }).then(res => {
                    this.$message({
                        message: res.msg,
                        type: 'success',
                        duration: 1000,
                        onClose: () =>{
                            this.initData();
                        }
                    })
                })
            }
        }
    }
</script>